/* M O B I L E * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media only screen and (max-width: 47.999em) /* Less than 600 pixels */

	.arrow:after
		font-size 80%
		margin-left 0.3em
		position relative
		top 0
		vertical-align baseline


	.home-page .arrow:after
		top 0.08em

	.slider:after
		icon-down-open()
		float right
		font-family "Entypo"
		font-size 80%

	.overview
		padding-top 2em
		padding-bottom 180px
		position relative

		.big-icon
			width 100%
			bottom 0
			left 0
			height 180px
			overflow hidden
			position absolute
			z-index -1
			text-align center

			img
				height auto
				opacity 0.2
				max-width 320px

		.summary
			font-size 120%
			width 100%

		.description
			font-size 100%
		.use li
			width 50%
		.previous-version

			label :after
				display block
			select
				width 100%

	.modules
		padding-top 1em
		padding-bottom 1em

		.docs
			margin-top 1em
			a
				display block


	.features
		padding-top 1em
		padding-bottom 1em
		section
			float left
			margin-top 0em
			&:first-child
				margin-top 0

			p
				padding 0.5em 1.5em

			a p
				margin-top 0.5em

	.guides
		padding-top 1em
		padding-bottom 1em

	.docs .content
		margin-top 2em

	.docs .toc
		ul
			a.top
				margin-bottom 0

			ul
				display none /* Simulate JS slider behaviour. It has to be replaced with JS. */


	.updates section
		margin-top 1em
		&:nth-of-type(1)
			margin-top 0

	#logo
		float none
		h1,
		p
			text-align center

	.home-page
		padding-top 1em
		padding-bottom 1em
		.big-icon
			display none

	#global-bar .wrapper
		padding 0

	#global-bar div.wrapper div.right
		position static
		margin-top 1.5em

		ul
			float none
			margin 0

		ul
			margin-bottom 0.5em

		li
			float none
			margin 0

			a
				border-radius 0

		ul.opened li,
		li.selected
			height 2em

		input
			width 100%

	#search
		float none
		margin 0 4%
		position static

		input
			width 100%

	#header
		.wrapper
			padding 0

		h1
			padding 0.5em 4%

			img
				margin-top 0em

	#main-header
		display none

	#header
		ul
			li
				overflow hidden
				height 0
				opacity 0
				transition height 0.4s ease
				a
					border-top solid #e5e3df 1px
					cursor pointer
					display block
					padding 0.5em 4%

			&.opened li,
			li.selected
				height 2.6em
				opacity 1

	#menu li
		float left
		width 50%
		margin 1em 0 0
		&:nth-of-type(1n) a
			margin 0 0.5em 0 0

		&:nth-of-type(2n) a
			margin 0 0 0 0.5em

	#footer.wrapper
		padding 0

	#sitemap
		width 100%

		div
			border-bottom solid 1px #e5e3df
			margin-bottom 1px
			overflow hidden
			float left
			min-width 100%
			height 4em
			transition height .5s ease

			h3
				font-size 2em
				background #fff
				color #acaaa7
				cursor pointer
				padding 0.5em 4%

			ul
				opacity 0
				padding 0 2em 1em 2em
		.opened
			height 11em
		.opened ul
			opacity 1


	#credits
		padding 1em 4% 2em
		clear both

/* T A B L E T * & * D E S K T O P * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media only screen and (min-width: 48em) /* More or equal to 768 pixels */

	.arrow:after
		font-size 80%
		margin-left 0.3em
		position relative
		top 0
		vertical-align baseline

	.overview
		padding-top 3em
		position relative

		.big-icon
			bottom 0
			height 230px
			overflow hidden
			position absolute
			right 4%
			width 400px
			z-index -1
			padding 50px 50px 0px 50px

			img
				height auto
				opacity 0.4
				width 100%
				transition transform 0.5s ease

		.use
			li
				width 9.6em
		.previous-version select
			width 19.2em


	.modules
		padding-top 2em
		padding-bottom 2em

		section
			position relative
			clear both

		div
			margin-top 1.5em
			width 48%
			&:nth-of-type(odd)
				float left

			&:nth-of-type(even)
				float right

			pre
				margin-top 1em

		.docs
			position absolute
			right 0
			top 0

	.features
		padding-top 1em
		padding-bottom 1em

		section
			float left
			width 33.333%
			&:nth-of-type(1) a
				margin 0 1.75em 0 -.6em

			&:nth-of-type(2) a
				margin 0 1.25em 0

			&:nth-of-type(3) a
				margin 0 0 0 1.75em

			a
				padding .8em
			& p
				margin-top 1em

	.guides
		padding-top 2em
		padding-bottom 2em

	.docs
		.toc
			float left
			width 26%

		.content
			float right
			width 70%

	.about
		padding-top 1em
		padding-bottom 2em

		.introduction
			float left
			width 70%

		.license
			float right
			width 25%

	.home-page
		padding-top 2em
		padding-bottom 2em

	.updates
		padding-top 2em
		padding-bottom 2em
		section
			float left
			width 33.333%
			&:nth-of-type(1) div.box
				margin 0 0.8em 0 0

			&:nth-of-type(2) div.box
				margin 0 0.8em 0

			&:nth-of-type(3) div.box
				margin 0 0 0 0.8em

	#header
		.wrapper div
			position relative

		h1
			padding 1em 0

		nav
			bottom 0em
			position absolute
			right 0
			ul li
				float left
				margin-left 1em
				&:first-child
					margin-left 0

				a
					position relative
					span
						position relative
						top -1em
						padding 0.1em 0.5em

				&.selected a
					color #777571
					&:after
						background #ffffff
						border solid 1px
						border-color #7d8aa5 #7d8aa5 transparent transparent
						bottom -6px
						content ""
						display block
						height 10px
						left 50%
						margin-left -5px
						position absolute
						transform-origin center
						transform rotate(-45deg)
						width 10px

	.main + hr
		display none

	#menu
		display none /* don't show in desktop. too few. */
		padding-top 1em
		li
			float left
			width 20%

			&:nth-of-type(1) a
				margin 0 0.6em 0 0

			&:nth-of-type(2) a
				margin 0 0.45em 0 0.3em

			&:nth-of-type(3) a
				margin 0 0.3em 0 0.45em

			&:nth-of-type(4) a
				margin 0 0.3em 0 0.45em

			&:nth-of-type(5) a
				margin 0 0 0 0.45em

	#footer.wrapper
		padding-top 2em
		padding-bottom 4em

	#sitemap
		float right

		div
			float left
			margin-left 2em
			width 8.8em
		div first-of-type
			margin-left 0.5em

		h3
			margin-bottom 0.3em

	#credits
		float left

	.core .big-icon
		height 230px
		width 340px

	.more .big-icon
		height 230px
		width 340px
